<template>
    <section id="regist-page">
      <main class='banner'></main>
       <article class="wrap-box wui-border-tb regist-msg">
         <w-field type="tel" name="Mobile" v-model="Mobile" label-width="50" icon-width="100" height="40" placeholder="手机号" class="inp-row">
            <w-row slot="label">
                <w-cell>
                   <i class='regist-mobile-icon'></i>
                </w-cell>
                 <w-cell class="line">
                   <span></span>
                 </w-cell>
            </w-row>
         </w-field>
      </article>
     <!-- <article class="wrap-box wui-border-tb regist-msg">
         <w-field name="VerifyCode" v-model="VerifyCode" label-width="50" icon-width="100" height="40" placeholder="验证码" class="inp-row">
            <w-row slot="label">
                <w-cell>
                   <i class='regist-mobile-icon'></i>
                </w-cell>
                <w-cell class="line"> 
                   <span>|</span>
                </w-cell>
                <div class="codebtn">
                   <code-field label="验证码" :disabled="msgBtn" v-on:fetch="getCode()" ref="codechild"></code-field>
                </div>
            </w-row>
         </w-field>
      </article>-->
      <article class="wrap-box wui-border-tb regist-msg">
         <w-field name="Name" v-model="Name" label-width="50" icon-width="100" height="40" placeholder="姓名" class="inp-row">
            <w-row slot="label">
                <w-cell>
                   <i class='regist-name-icon'></i>
                </w-cell>
                 <w-cell class="line"> 
                   <span></span>
                 </w-cell>
            </w-row>
         </w-field>
      </article>
      <article class="wrap-box wui-border-tb regist-msg">
        <!--<w-field name="Province" v-model="Province" label-width="50" icon-width="100" height="40" placeholder="省份" class="inp-row">
            <w-row slot="label">
                <w-cell>
                   <i class='regist-pro-icon'></i>
                </w-cell>
                 <w-cell class="line"> 
                   <span>|</span>
                 </w-cell>
            </w-row> 
        </w-field>-->
        <!--<Area :props-show="true" v-on:increment="areaResult"></Area>-->
         <div class="contact-address">
                <w-row>
                    <w-cell class="address-col2">
                        <div style="width: 100%;" @click="showCity()">
                            <!--<w-field class="input-amount wui-border-radius-1px" label-width="50"  name="address" v-model="pcqName" :height="46" :readonly="true" :show-icon="true" :showLabel="true" placeholder="请选择省市区"  unselectable="on">
                             <w-row slot="label">
                               <w-cell>
                                 <i class='regist-pro-icon'></i>
                               </w-cell>
                               <w-cell class="line"> 
                                 <span></span>
                               </w-cell>
                             </w-row>
                            </w-field>-->
                             <w-field class="input-amount wui-border-radius-1px" label-width="50"  name="address" v-model="pcqName" :height="46" :show-icon="true" :showLabel="true">
                                <w-row slot="label">
                                    <w-cell>
                                        <i class='regist-pro-icon'></i>
                                    </w-cell>
                                    <w-cell class="line"> 
                                       <span></span>
                                    </w-cell>
                                </w-row>
                                <div slot="content" class="sub-title">{{pcqName || '请选择省市区'}}</div>
                              </w-field>
                        </div>
                    </w-cell>
                    <w-popup v-model="popupShowPca" position="bottom" class="select-popup">
                        <div style="background-color:#fff;text-align:center;">
                            <w-row class="select-popup-head">
                                <w-cell class="title">
                                    <!--<label class="popup-title" style="padding-left: 0.6rem;">请选择省市区</label>-->
                                </w-cell>
                                <w-cell class="btn">
                                    <label style="width: 100%; text-align: right;">
                                        <img src="../../assets/img/close.png" @click="closePopUpPca($event)"/>
                                    </label>
                                </w-cell>
                            </w-row>
                            <w-row>
                                <Area :props-show="true" v-on:increment="areaResult"/>
                            </w-row>
                        </div>
                    </w-popup>
                </w-row>
            </div>
      </article>
      <!--<article class="wrap-box wui-border-tb regist-msg">
         <w-field name="City" v-model="City" label-width="50" icon-width="100" height="40" placeholder="城市" class="inp-row">
            <w-row slot="label">
                <w-cell>
                   <i class='regist-city-icon'></i>
                </w-cell>
                 <w-cell class="line"> 
                   <span>|</span>
                 </w-cell>
            </w-row>
         </w-field>
      </article> -->
     <article class="wrap-box wui-border-tb regist-msg">
         <w-field name="Hospital" v-model="Hospital" label-width="50" icon-width="100" height="40" placeholder="医院" class="inp-row">
            <w-row slot="label">
                <w-cell>
                   <i class='regist-hos-icon'></i>
                </w-cell>
                 <w-cell class="line"> 
                   <span></span>
                 </w-cell>
            </w-row>
         </w-field>
      </article>
      <article class="wrap-box wui-border-tb regist-msg">
         <div class="contact-address">
                <w-row>
                    <w-cell class="address-col2">
                        <div style="width: 100%;" @click="showDep()">
                            <w-field class="input-amount wui-border-radius-1px" label-width="50"  name="Deparment" v-model="Deparment" :height="46" :readonly="true" :show-icon="true" :showLabel="true" placeholder="请选择科室">
                            <w-row slot="label">
                                <w-cell>
                                    <i class='regist-pro-icon'></i>
                                </w-cell>
                                <w-cell class="line"> 
                                    <span></span>
                                </w-cell>
                            </w-row>
                            <div slot="content" class="sub-title">{{Deparment || '请选择科室'}}</div>
                            </w-field>
                        </div>
                    </w-cell>
                    <w-popup v-model="popupDep" position="bottom" class="select-popup">
                        <div style="background-color:#fff;text-align:center;">
                            <w-row class="select-popup-head">
                                <w-cell class="title">
                                </w-cell>
                                <w-cell class="btn">
                                    <label>
                                        <img src="../../assets/img/close.png" @click="closePopUp($event)"/>
                                    </label>
                                </w-cell>
                            </w-row>
                            <w-row>
                                <ul style="width: 100%;">
                                    <li v-for="item in DeparmentList" :key="item.value" @click="checkOptions(item.value,item.text)" :class="{'checoption': item.value == checkOptionsVal, 'unchecoption': item.value!= checkOptionsVal,'unchecoption': checkOptionsVal == 0}">{{item.text}}</li>
                                </ul>
                            </w-row>
                            <w-row>
                                <w-button type="primary" size="large" :block="true" bgColor="#00A2F6" @click="changeDep($event)">确定</w-button>
                            </w-row>
                        </div>
                    </w-popup>
                </w-row>
            </div>
      </article>
      <article class="wrap-box wui-border-tb regist-msg" v-if="DeparmentSelect == 0">
         <w-field name="OtherDeparment" v-model="OtherDeparment" label-width="50" icon-width="100" height="40" placeholder="其他科室" class="inp-row">
            <w-row slot="label">
                <w-cell>
                   <i class='regist-otherdep-icon'></i>
                </w-cell>
                 <w-cell class="line"> 
                   <span></span>
                 </w-cell>
            </w-row>
         </w-field>
      </article>
      <article class="padding-submit">
            <w-button size="large" type="primary" :bgColor="bgColor" fontColor="#ffffff" :block="isBlock" borderColor="borderColor"  @click="register()">注 册</w-button>
      </article>
    </section>
</template>

<script>
import Vue from 'vue'
import { mapGetters, mapActions } from 'vuex';
import axios from 'axios'
import Area from '../../components/city';
import codeField from '../../components/code-field.vue';

export default {
    name: 'regist',
    props: {

    },
    data() {
        return {
            isBlock: true,
            bgColor: "#005ba8",
            plain: false,
            Mobile: '',
            VerifyCode: '',
            Name: '',
            Hospital: '',
            Deparment: '',
            OtherDeparment: '',
            DeparmentSelect: 1,

            popupShow: false,
            popupShowPca: false,
            pcqName: "",
            pName: "",
            cName: "",

            msgBtn: true,
            popupDep: false,
            checkOptionsVal: '',
            DeparmentList: [
            {
                text: '麻醉科',
                value: '麻醉科'
            },
            {
                text: '骨科',
                value: '骨科'
            },
            {
                text: 'ICU',
                value: 'ICU'
            },
            {
                text: '外科',
                value: '外科'
            },
            {
                text: '其他',
                value: '其他'
            }]
        }
    },
    directives: {
        focus: {
            inserted: function (el, {value}) {
                if (value) {
                    el.focus();
                }
            }
        }
    },
    components: {
        Area,
        codeField
    },
    computed: {
        formValidated() {
            return (this.Mobile.replace(/\s+$|^\s+/g, "").length === 11) &&
                (this.VerifyCode != "") &&
                (this.Name != "") &&
                (this.Hospital != "")
        }
    },
    mounted() {
     
    //   if(localStorage.openID == "" || localStorage.openID == undefined || localStorage.openID == "undefined") {
    //              axios.get('/wx/getcodeurl', {　
    //                 params: { 'Appid': 'wx27a54ca734af2cf8','redirect_uri': 'http://zqdn.aegis-s.com/wx/getwxuser' }
    //                   }).then(function(response) {
    //                     //引导用户根据地址获取code
    //                     //location.href= response.data;
    //                     let wxobj = this.GetRequest(response.data);
    //                     let openid = wxobj["/regist?openid"];
    //                     localStorage.openID = openid;
    //                     location.reload();
    //                   }).catch(function(error) {　　
    //                     console.log(error);　
    //             });
    //         } else {
        
                   //let openid = localStorage.openID;
                    let wxobj = this.GetRequest(location.hash);
                    let openid = wxobj["/regist?openid"];
                    axios.get('/user/check', {　
                            params: { 'openid': openid }
                        }).then(function(response) {
                        console.log(response);
                        if(response.data.msg == '1') {
                            Wui.Toast.show('该手机号已注册', 'middle');
                            setTimeout(function() {
                                Vue.prototype.$wx.closeWindow();
                                //location.href = 'https://mp.weixin.qq.com/mp/homepage?__biz=MzU1NDcwODI0MQ==&hid=2&sn=2e584d3bd438302f0ba11c2d9cb0f58a&scene=18#wechat_redirect';
                            }, 1000);
                        }
                        }).catch(function(error) {　　
                            console.log(error);　
                    });
            //}
    },
    methods: {
        ...mapActions([
            'registUser',
            'setLoading'
        ]),

        getCode() {
            let parmas = {
                obligatePhone: this.Mobile,
                msgType: 1
            }
            if (!(/^(1[0-9])\d{9}$/.test(this.Mobile))) {
                Wui.Toast.show('请输入正确的手机号', 'middle');
                return false;
            } else {
                this.$refs.codechild.countDown();
                //this.getVerifyCode(parmas).then((res) => {
                    //收到短信
                //});
            }
        },
        showDep: function() {
           this.popupDep = true;
           document.body.style.overflowY = 'hidden';

        },
        closePopUp: function() {
           this.popupDep = false;
           this.checkOptionsVal = '';
           document.body.style.overflowY = 'auto';
        },
        checkOptions(val, name) {
            this.checkOptionsVal = val;
            this.checkOptionsName = name;
        },
        changeDep($event) {
            $event.stopPropagation();
            this.Deparment = this.checkOptionsVal;
            this.popupDep = false;
            document.body.style.overflowY = 'auto';
            if(this.checkOptionsVal == '其他') {
                this.DeparmentSelect = 0;
                document.documentElement.scrollTop = document.documentElement.scrollTop + 100;
                //this.Deparment = this.checkOptionsVal;
            } else {
                this.DeparmentSelect = 1; 
            }
        },
        GetRequest: function(url) {
            var url = decodeURI(url); //获取url中"?"符后的字串   
            var theRequest = {};
            if (url.indexOf("?") != -1) {   
                var str = url.substr(1);   
                let strs = str.split("&");   
                for(var i = 0; i < strs.length; i ++) {   
                    theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);   
                }   
            }  
            return theRequest;   
        },   
        register: function() {

            let phoneValide = /^(1[0-9])\d{9}$/;
            if (!phoneValide.test(this.Mobile)) {
                Wui.Toast.show('请输入正确的手机号', 'middle');
                return false;
            }
            // if (this.VerifyCode.replace(/\s+$|^\s+/g, "") == '') {
            //     Wui.Toast.show('请输入验证码', 'middle');
            //     return false;
            // }
            if (this.Name.replace(/\s+$|^\s+/g, "") == '') {
                Wui.Toast.show('请输入姓名', 'middle');
                return false;
            }
            if (this.pName == '') {
                Wui.Toast.show('请输入省份/城市', 'middle');
                return false;
            }
            if (this.Hospital == '') {
                Wui.Toast.show('请输入医院', 'middle');
                return false;
            }
            if (this.checkOptionsVal == '') {
                Wui.Toast.show('请输入科室', 'middle');
                return false;
            }
            if (this.DeparmentSelect == 0 && this.OtherDeparment == '') {
                Wui.Toast.show('请输入科室', 'middle');
                return false;
            }

            //获取微信相关参数
            let wxobj = this.GetRequest(location.hash);
            let params = {
                Mobile: this.Mobile,
                VerifyCode: this.VerifyCode,
                Name: this.Name,
                Province: this.pName,
                City: this.cName,
                Area: this.aName,
                Hospital: this.Hospital,
                Deparment:  (this.checkOptionsVal == '其他' ? this.OtherDeparment : this.Deparment),
                OpenId: wxobj["/regist?openid"],
                NikeName: wxobj.nickname,
                HeadImg: wxobj.headimgurl
            }
            this.registUser(params).then((res) => {
               this.setLoading(false);
               localStorage.openID = params.OpenId;
            }, err => {
                this.setLoading(false);
            });
        },
        areaResult: function (psc, result) {
            this.pcqName = psc;
            this.popupShowPca = false;
            this.pName = result.province.name;
            this.cName = result.city.name;
            this.aName = result.area.name;
            document.body.style.overflowY = 'auto';
        },
         showCity() {
            this.popupShowPca = true;
            document.body.style.overflowY = 'hidden';
        },
        closePopUpPca($event) {
            $event.stopPropagation();
            this.popupShowPca = false;
            document.body.style.overflowY = 'auto';
        }
    },
    watch: {
        Mobile: function (val) {
            if (val.toString().length == 11) {
                this.msgBtn = false;
            } else {
                this.msgBtn = true;
            }
        },
        popupShowPca: function(val) {
           if(val == true) {
              document.body.style.overflowY = 'hidden';
           } else {
              document.body.style.overflowY = 'auto';
           }
        },
        popupDep: function(val) {
           if(val == true) {
              document.body.style.overflowY = 'hidden';
           } else {
              document.body.style.overflowY = 'auto';
           }
        }
    }
}
//  window.addEventListener("popstate", function(e) {  //回调函数中实现需要的功能
//          Vue.prototype.$wx.closeWindow();
//  }, false);  
</script>

<style lang="scss" scoped>
   #regist-page {
       .banner {
           width: 100%;
           height: 10.625rem;
           background: url('../../assets/img/login/banner.png') 0 0 no-repeat;
           background-size: cover;
       }
       .regist-msg {
           width: 80%;
           margin: 2rem auto;
           border: 1px solid #e1e1e1;
           border-radius: 8px;
           margin-bottom: -0.6rem;
           background: #f2f2f2;
           padding: 0 1rem 0 1rem;
           i {
            //    width: 1.2rem;
            //    height: 1.45rem;
               width: 24px;
               height: 29px;
           }
           .regist-name-icon {
               background: url('../../assets/img/login/login-name.png') center no-repeat;
           }
            .regist-mobile-icon {
               background: url('../../assets/img/login/login-mobile.png') center no-repeat;
           }
            .regist-pro-icon {
               background: url('../../assets/img/login/login-pro.png') center no-repeat;
           }
           .regist-city-icon {
               background: url('../../assets/img/login/login-hos.png') center no-repeat;
           }
           .regist-hos-icon {
               background: url('../../assets/img/login/login-hos.png') center no-repeat;
           }

           .regist-dep-icon {
               background: url('../../assets/img/login/login-otherdep.png') center no-repeat;
           }
            .regist-otherdep-icon {
               background: url('../../assets/img/login/login-dep.png') center no-repeat;
           }

           .line {
               display: flex;
               justify-content: center;
           }
           .line span {
              display: inline-block;
              width: 1px;
              height: 34px;
              background: url('../../assets/img/login/line.png') 0 0 no-repeat;
           }
       }
       .padding-submit {
           width: 90%;
           margin: 3rem auto;
       }
       .codebtn {
           position: absolute;
           right: 1.2rem;
       }
       .wui-field {
           background: none !important;
       }
       .wui-border-1px {
           position: static !important;
       }
    //    ::-webkit-input-placeholder { /* WebKit browsers */ 
    //      font-size: 16px;
    //    } 
    .wui-button:after {
        height: 0 !important;
        width: 0 !important;
    }
    .wui-border-1px:after {
        border: 0 !important;
    }
    .sub-title {
        width: 100%;
        height: 100%;
        position: relative;
        line-height: 48px;
        font-size: 14px;
        color: #C2C2C2;
        padding-left: 4px;
        select {
            width: 100% !important;
            height: 100%;
            border: 0;
            background: #f2f2f2 !important;
            color: #b2b2b2;
            position: absolute;
        }
    }
    .select-popup {
        ul {
            padding: 0;
            margin: 0;
        }
        li {
            list-style: none;
            line-height: 44px;
            border-bottom: 1px solid #dedede;
            height: 44px;
            color: #C0C0C0;
            font-size: 18px;
        }
        .select-popup-head {
            height: 40px;
            background: #FAFBFD;
            .title {
                flex-grow: 3;
                font-size: 16px;
                color: #666666;
                letter-spacing: 0;
                line-height: 16px;
            }
            .btn {
                flex-grow: 1;
                justify-content: flex-end;
                label {
                    margin-right: 6px;
                }
            }
            label {
                padding-top: 3px;
            }
        }
        .checoption {
            background: #FAFBFD;
            color: #666666;
        }
        .unchecoption {
            color: #C0C0C0;
            background: #ffffff;
        }
        .hiddenoption {
            display: none;
        }
    }
   }
</style>